<template>
    <div ref="intersectionTarget">
        <slot v-if="isVisible" />
    </div>
</template>
  
<script setup lang="ts">
import { ref, watchEffect } from 'vue'

const intersectionTarget = ref(null)
const isVisible = ref(false)
  
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        console.log('isVisible2', entry, isVisible.value)
        isVisible.value = entry.isIntersecting
    })
})
  
watchEffect(() => {
    if (intersectionTarget.value) {
        observer.observe(intersectionTarget.value)
    }
})
      
</script>
